<template>
  <div class="page">
    <div class="left-menu-close ac-btn-close" @click="handleClose"></div>
    <Card title="机制运行效果">
      <div class="pieBox">
        <div>
          <Percentage ref="fxfx"></Percentage>
          <div class="text">{{ sl[0].name }}</div>
        </div>
        <div>
          <Percentage ref="pcrw"></Percentage>
          <div class="text">{{ sl[1].name }}</div>
        </div>
        <!-- <div>
          <Percentage ref="yhzg"></Percentage>
          <div class="text">{{ sl[2].name }}</div>
        </div> -->
      </div>
      <!-- <textNum
        :data="sl"
        valueSize="18px"
        style="margin-bottom: 10px"
      ></textNum> -->
      <OnlyTable
        ref="yhtable"
        height="90"
        :headers="['部门名称', '分数', '运行情况']"
        :propsData="['deptName', 'fsCount', 'yxCondition']"
      >
        <template #yxCondition="{ row }">
          <span style="color: #ff5f55" v-if="row.yxCondition == '差'">{{
            row.yxCondition
          }}</span>
          <span style="color: #10f3a7" v-if="row.yxCondition == '优'">{{
            row.yxCondition
          }}</span>
          <span style="color: #27cbff" v-if="row.yxCondition == '良'">{{
            row.yxCondition
          }}</span>
        </template>
      </OnlyTable>
    </Card>
    <Card title="风险分析清单">
      <textNum :data="dyAndsj"></textNum>
      <div style="position: relative; height: 20px">
        <div class="dwselect">
          <div class="selected">
            <div class="title">{{ dwselectNode.name }}</div>
            <div @click="clickdwSelect" class="icon">
              <img src="../assets/selected.svg" alt="" />
            </div>
          </div>
          <div v-if="dwshowList" class="select-list">
            <div
              @click="clickdwNode(item)"
              v-for="item in dwSelectList"
              class="list-item"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
      <textNum :data="gkAndyh"></textNum>
    </Card>
    <Card title="隐患排查任务">
      <div style="position: relative">
        <div class="select">
          <div class="selected">
            <div class="title">{{ selectNode.name }}</div>
            <div @click="clickSelect" class="icon">
              <img src="../assets/selected.svg" alt="" />
            </div>
          </div>
          <div v-if="showList" class="select-list">
            <div
              @click="clickNode(item)"
              v-for="item in selectList"
              class="list-item"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
        <PieVue ref="yhpcPie"></PieVue>
      </div>
    </Card>
  </div>
</template>

<script>
import { defineComponent } from "vue";

import { EmergencyForce } from "../components/index.js";
import { apis, gkAndyh, jzyxqk, yhrwbt, sl, dylb } from "@/api/threeD.js";
import Button from "../components/button.vue";
import Card from "../components/Card.vue";
import Speed from "../components/speed.vue";
import textNum from "../echarts/textNum.vue";
import { fxAndgk } from "@/api/threeD";
import OnlyTable from "../components/onlyTable.vue";
import PieVue from "../echarts/pie.vue";
import Percentage from "../echarts/percentage.vue";

export default defineComponent({
  name: "LeftMenu",
  components: {
    EmergencyForce,
    Button,
    Card,
    Speed,
    textNum,
    OnlyTable,
    PieVue,
    Percentage,
  },

  data() {
    return {
      speed: 10,
      showButtons: false,
      gkAndyh: [],
      dyAndsj: [],
      selectList: [
        { name: "全部", value: 0 },
        { name: "今日", value: 1 },
        { name: "本周", value: 2 },
        { name: "本月", value: 3 },
      ],
      selectNode: { name: "全部", value: 0 },
      showList: false,
      sl: [
        { name: "风险分析完成率", count: "0%" },
        { name: "隐患整改率", count: "0%" },
        { name: "排查任务完成率", count: "0%" },
      ],
      dwSelectList: [],
      dwselectNode: { name: "全部", value: null },
      dwshowList: false,
    };
  },
  methods: {
    clickSelect() {
      this.showList = !this.showList;
    },
    clickdwSelect() {
      this.dwshowList = !this.dwshowList;
    },
    clickNode(item) {
      this.selectNode = item;
      this.showList = false;
      this.initYh();
    },
    clickdwNode(item) {
      this.dwselectNode = item;
      this.dwshowList = false;
      this.initGKYH();
    },
    initYh() {
      yhrwbt({
        tempType: this.selectNode.value,
      }).then((res) => {
        let total = 0;
        res.data.forEach((item) => (total += item.count));
        this.$refs.yhpcPie.setData({
          total,
          data: res.data.map((item) => ({
            name: item.name,
            value: item.count,
          })),
          center: "任务总数",
          color: ["#10F3A7", "#FF5F55", "#FFCB41", "#FFCB41"],
        });
      });
    },
    initGKYH() {
      gkAndyh({
        analysisUnit: this.dwselectNode.value,
      }).then((res) => {
        this.gkAndyh = res.data;
      });
    },
  },
  mounted() {
    fxAndgk().then((res) => {
      this.dyAndsj = res.data;
    });
    jzyxqk().then((res) => {
      this.$refs.yhtable.setData(res.data);
    });

    sl().then((res) => {
      this.sl = res.data;
      const mapRef = {
        0: "fxfx",
        1: "pcrw",
        2: "yhzg",
      };
      this.sl.forEach((ele, index) => {
        if (this.$refs[mapRef[index]]) {
          this.$refs[mapRef[index]].setData({
            bfb: Number(ele.count.split("%")[0]).toFixed(0) + "%",
            value: Number(ele.count.split("%")[0]).toFixed(0),
          });
        }
      });
    });
    this.initYh();
    this.initGKYH();
    dylb().then((res) => {
      this.dwSelectList = [];
      this.dwSelectList = res.data.map((ele) => {
        return {
          name: ele.analysisUnit,
          value: ele.analysisUnit,
        };
      });
      this.dwSelectList.unshift({
        name: "全部",
        value: null,
      });
    });
    // apis.yjll();tempType类型（0全部、1日、2周、3月）
  },
});
</script>

<style lang="scss" scoped>
.left-menu {
  position: relative;
  width: 360px;
  height: 800px;
  color: #fff;

  &-close {
    position: absolute;
    top: 13px;
    right: 7px;
    z-index: 9;
    transform: rotate(-17deg);
    cursor: pointer;
  }
}
.button {
  margin-top: 20px;
}

.page {
  padding-top: 15px;
  background-image: url("../assets/pagebg.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center center;
  width: 418px;
  height: 934px;
  backdrop-filter: blur(10px);
  overflow: hidden;
  color: #fff;
}
.select {
  position: absolute;
  right: 0;
  z-index: 999;
  .select-list {
    position: absolute;
    // display: none;
    background-color: rgba(0, 0, 0, 0.8);
    width: 40px;
    z-index: 999;
    max-height: 100px;
    overflow: auto;
    cursor: pointer;
    top: 25px;
    // left: 30px;
    color: #fff;
    text-align: left;

    .list-item {
      &:hover {
        color: #31effb;
        text-align: left;
      }
    }
  }
  .selected {
    color: #31effb;
    display: flex;
    height: 30px;
    img {
      width: 15px;
    }
    .title {
      padding-top: 4px;
    }
    .icon {
      padding-top: 4px;

      width: 30px;
      text-align: center;
      line-height: 21px;
      cursor: pointer;
    }

    .button {
      border: 0.830211px solid #57d7ff;
      border-radius: 4px;
      padding: 3px 5px;
      margin-left: 5px;
      box-sizing: border-box;
      cursor: pointer;
    }
  }
}
.dwselect {
  position: absolute;
  right: 0;
  z-index: 999;
  background-image: url("../assets/selectbg.png");
  width: 100%;
  display: flex;
  justify-content: flex-end;
  .select-list {
    position: absolute;
    // display: none;
    background-color: rgb(0, 0, 0, 0.5);
    width: 90px;
    z-index: 999;
    max-height: 100px;
    overflow: auto;
    cursor: pointer;
    top: 25px;
    right: 0;
    // left: 30px;
    color: #fff;
    text-align: left;

    .list-item {
      &:hover {
        color: #31effb;
        text-align: left;
      }
    }
  }
  .selected {
    color: #31effb;
    display: flex;
    height: 30px;
    img {
      width: 15px;
    }
    .title {
      padding-top: 4px;
    }
    .icon {
      padding-top: 4px;

      width: 30px;
      text-align: center;
      line-height: 21px;
      cursor: pointer;
    }

    .button {
      border: 0.830211px solid #57d7ff;
      border-radius: 4px;
      padding: 3px 5px;
      margin-left: 5px;
      box-sizing: border-box;
      cursor: pointer;
    }
  }
}
.pieBox {
  display: flex;
  justify-content: space-around;
  .text {
    text-align: center;
    font-size: 14px;
    margin: 5px 0 15px 0;
  }
}
</style>
